<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            font-family: "Microsoft YaHei UI";
        }
        p{
            color:green;
        }
        input:focus
        {
            background-color:yellow;
        }
        h2+h1 {
            color: yellow;
        }
        /*加点复杂度，给h2的后面的div里的span元素上样式*/
        h2~div>span {
            color: red;
        }

        p.test:before{
            content:url("./asserts/37415494744720.jpg");
        }
    </style>
</head>
<body>
    <ol>
        <li>通配符选择器:*，即所有元素
            <p>*{
                font-family: "Microsoft YaHei UI";
                }</p>
        </li>
        <li>标签选择器：button,p,a
            <p>p{
                color:green;
                }</p>
        </li>
        <li>id选择器: 为指定id名称的标签加样式，例如为id为test1的标签加样式
            <p>
                #test1{...}
            </p>
        </li>
        <li>class类选择器:为指定的class名称的标签加样式，例如为class为test1的标签加样式
            <p>
                .test1{...}
            </p>
        </li>
        <li>交集选择器：通过多种特性来指定标签样式，例如为class名称同时为test1 、test2的div标签上样式
            <p>
                div.test1.test2{...}
            </p>
        </li>
        <li>并集选择器：为多个不同类型的标签添加样式,例如同时为p,strong和span标签上样式
            <p>
                p,strong,span{
                    color: red;
                }
            </p>
        </li>
        <li>后代选择器：例如给div下的strong定义样式,这个strong可以是直接或者间接子元素
            <p>
                div strong{...}
            </p>
        </li>
        <li>直接子元素选择器：给某一元素的直接子元素上样式，例如某一div的直接子元素strong上样式
            <p>
                div.test1>strong{...}
            </p>
        </li>
        <li>子选择器：
            <ul>
                <li>第一个子元素： p span :first-child//父子关系选择器</li>
                <li>最后一个子元素： span:last-child//父子关系选择器</li>
                <li>第几个子元素： p>span:nth-child(2)//父子关系选择器</li>
                <li>倒数第几个子元素： p span:nth-last-child(2)//父子关系选择器</li>
            </ul>
        </li>
        <li>兄弟选择器:
            <p>
                相邻兄弟选择器:h2+h1
            </p>
            <h2>1111</h2>
            <h1>2222</h1>
            <h1>2222</h1>
            <p>
                兄弟选择器：h2~h1
            </p>
            <h2>1111</h2>
            <h1>2222</h1>
            <h1>2222</h1>
            <div>
                <span>333</span>
                <span>444</span>
                <span>555</span>
            </div>

        </li>
        <li>伪类选择器：
            <p>
                a:link 初始访问、
                ​       a:visited 已经被访问过的、
                ​       a:hover 鼠标悬浮、
                a:active 超链接被点击的一瞬间、
                ​       a:focus 获得光标焦点
            </p>
            <strong>
                其中a标签有4种伪类，即link、visited、hover、active，且必须按此顺序写，
                input有1种伪类，即focus
                <input />
            </strong>
        </li>
        <li>伪元素选择器：
            <p>
                ::before、
    ​            ::after、
    ​            ::first-line、
    ​            ::first-letter
            </p>
            <p class="test">test 伪元素</p>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before" >文档链接</a>
        </li>
        <li>属性选择器：html5的新特性
            <p>
                input[type="text"]{..}
            </p>
        </li>
    </ol>

</body>
</html>
